<!-- components/CustomNavbar.vue -->
<template>
  <view class="custom-navbar"  
	:style = "{ 
		height:height,
		backgroundColor:backgroundColor,
		backgroundImage:backgroundImage,
		alignText:alignText
		}">
	  <!-- 左侧区域 -->
	      <view class="left"  :style="{display: display}">
	        <!-- 返回按钮 -->
	        <view 
			 v-if="showBack"
			 :style="{dispaly:dispaly}"
	          class="back-wrapper"
	          @click="handleBack"
	        >
	          <slot name="backIcon">
	            <u-icon
	              :name="backIconName"
	              :color="backIconColor"
	              
	              class="back-icon"
	            ></u-icon>
	          </slot>
	        </view>
	      </view>
  	<!-- 标题区域 -->
  	    <view class="title" >
  	      <slot>
  	        <view class="title-text" v-html="title"></view>
  	      </slot>
  	    </view>
		<view class="right">
			
		</view>
  </view>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 是否显示返回按钮
  title:{
	  type:String,
	  default:'宮補堂'
  },
  height:{
	  type:String,
	  default:'88rpx',
  },
  display:{
	  type:String,
	  default:'bloke'
  },
  alignText:{
	  type:String,
	  default:'center'
  },

  backgroundImage:{
	  type:String,
	  default:"url('/static/index_slice/my_bg.png')"
  },
  showBack: {
    type: Boolean,
    default: true
  },
  // 返回图标名称
  backIconName: {
    type: String,
    default: 'arrow-left'
  },
  // 返回图标颜色
  backIconColor: {
    type: String,
    default: '#fff'
  },
  // // 返回图标尺寸
  // backIconSize: {
  //   type: [Number, String],
  //   default: 20
  // },
  // 返回文字
  backText: {
    type: String,
    default: ''
  },
  // 返回文字颜色
  backTextColor: {
    type: String,
    default: '#333333'
  },
  // 高度
  height: {
    type: [Number, String],
    default: 90
  }
})

const emit = defineEmits(['back'])

// 头部样式
const headerStyle = computed(() => ({
  backgroundColor: props.backgroundColor,
  height: uni.upx2px(props.height) + 'px',
  paddingTop: 'var(--status-bar-height)'
}))



// 返回按钮处理
const handleBack = () => {
  emit('back')
  uni.navigateBack()
}
</script>
<style scoped lang="scss">
	.custom-navbar {
	  height: 88rpx;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 0 15px;
	  background: #FF413B;
	  font-size: 32rpx;
	  color: #fff;
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  z-index: 999;
	  font-size: 36rpx;
	  font-weight: Bold;
	  background-repeat: none;
	  overflow: hidden;
	  
	}
	
	/* 适配刘海屏 */
	/* #ifdef APP-PLUS */
	.custom-navbar {
	  padding-top: constant(safe-area-inset-top);
	  padding-top: env(safe-area-inset-top);
	  height: calc(10px + constant(safe-area-inset-top));
	  height: calc(10px + env(safe-area-inset-top));
	}
	/* #endif */
	.title-text{
		display: flex;
		align-items: center;
		  overflow: hidden;
		  image{
			  display: inline-block;
			  vertical-align: middle;
			  margin-right: 20rpx;
		  }
		  /* 兼容Firefox */
		  @supports (-moz-appearance: none) {
		    display: -moz-box;
		    -moz-box-orient: vertical;
		    -moz-line-clamp: 3;
		  }
	}
	
	
</style>